<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>sort</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <style>
        .page {
            display: flex;
            flex-direction: column;
            width: 100%;
            height: 100%;

        }

        .sort {
            display: flex;
            flex: 1;
            flex-direction: row;
        }

        .scroll_left {
            display: flex;
            flex-direction: column;
            width: 80px;
            height: 100%;
            background-color: #f8f8f8;
        }

        .left_one {
            display: flex;
            flex-direction: row;
            align-items: center;
            height: 40px;
            background-color: #f8f8f8;
        }

        .left_one_on {
            background-color: #ffffff;
        }

        .left_line {
            width: 4px;
            height: 14px;
            background-color: #ff7037;
            visibility: visible;
        }

        .hidden {
            visibility: hidden;
        }

        .left_zi {
            flex: 1;
            font-weight: 500;
            text-align: center;
        }

        .scroll_right {
            flex: 1;
        }

        .right_box {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            margin: 15px;
            padding: 15px 0 0 15px;
            background-color: white;
            border-radius: 8px;
        }

        .right_item {
            margin-right: 15px;
            margin-bottom: 15px;
            width: 60px;
            height: auto;
        }

        .right_item_img {
            width: 60px;
            height: 60px;
            background-color: #f6f6f6;
            flex-shrink: 0;
        }

        .right_item_zi {
            line-height: 40px;
            text-align: center;
            color: #8f8f8f;
            font-size: 14px;
        }
    </style>
</head>

<body>
    <div class="page">
        <div class="nav-bar">
            <span class="nav-bar-title">分类</span>
        </div>
        <div class="sort">
            <div class="scroll-view-y scroll_left">

            </div>
            <div class="scroll-view-y scroll_right">
                <div class="right_box"></div>
            </div>

        </div>


    </div>
</body>
<script src="../script/api.js"></script>
<script>
    apiready = function () {
        $api.fixStatusBar($api.dom('.nav-bar'));
    }

    let sideList = [
        {
            "id": "1",
            "name": "女装"
        },
        {
            "id": "2",
            "name": "男装"
        },
        {
            "id": "1ff38f90-caf7-11ea-8523-0da8a6a49497",
            "name": "运动装"
        },
        {
            "id": "418835c0-caf7-11ea-8523-0da8a6a49497",
            "name": "婴儿服饰"
        }
    ]
    getSideContent(0)
    function getSideContent(active) {
        let str = '';
        sideList.forEach((item, index) => {
            str += `
            <div class="left_one ${index == active ? ' left_one_on' : ''}" onclick="changeSide(${index})">
                <div class="${index == active ? 'left_line' : ''}"></div>
                <span class="left_zi" style="color:${index == active ? '#333;' : '#8f8f8f;'}"">${item.name}</span>
            </div>
            `
        })
        document.querySelector('.scroll_left').innerHTML = str;
    }

    function changeSide(param) {
        getSideContent(param)
    }

    let contentList = [
        {
            "id": "258389c0-d532-11ea-9b7c-8f1336202828",
            "name": "连衣裙",
            "icon": "../images/linkImg/51a76d00c46bdc90fa0138601cdb2060.png"
        },
        {
            "id": "11cca860-d2ff-11ea-a0bc-bd616acc739c",
            "name": "针织裙",
            "icon": "../images/linkImg/bf017f44d8396a43d0c3a5faaba647dd.png"
        },
        {
            "id": "07bbe7f0-d2ff-11ea-a0bc-bd616acc739c",
            "name": "T连衣裙",
            "icon": "../images/linkImg/c88d14de583f85ef069dd0b1e065bd92.png"
        },
        {
            "id": "f97b6080-d2fe-11ea-a0bc-bd616acc739c",
            "name": "裤子",
            "icon": "../images/linkImg/19efd0fa529705147316dd696e860ff7.png"
        },
        {
            "id": "42990ef0-ccb7-11ea-8ee1-07d7d7fa197c",
            "name": "吊带裙",
            "icon": "../images/linkImg/de8a2625b3adafabe55bfe1a7ec2b386.png"
        },
        {
            "id": "42990ef0-ccb7-11ea-8ee1-07d7d7fa197c",
            "name": "长裙",
            "icon": "../images/linkImg/e240fc0c356abfb2a44d358521881c30.png"
        },
        {
            "id": "42990ef0-ccb7-11ea-8ee1-07d7d7fa197c",
            "name": "短裙",
            "icon": "../images/linkImg/3ce4698626fce034b2e9aebc33ee0065.png"
        }
    ]
    getGoodsContent()
    function getGoodsContent() {
        let str = '';
        contentList.forEach((item, index) => {
            str += `
            <div onclick="onItemClick()" class="right_item">
				<img class="right_item_img" src="${item.icon}"/>
				<span class="right_item_zi color_12">${item.name}</span>
			</div>
            `
        })
        document.querySelector('.right_box').innerHTML = str;
    }

    function onItemClick() {
        api.openWin({
            name: 'detail',
            url:'./detail.html'
        })
    }

</script>

</html>